<template>
  <van-popup
    v-model="show"
    position="left"
    class="fa"
    :style="{ height: '100%', width: '100%' }"
  >
    <div>
      <van-nav-bar
        title="联系人"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />

      <van-empty v-show="this.data.length == 0" description="空" />
      <van-contact-card type="add" @click="onClickRight" />
      <div class="scrollBar">
        <div class="Editbox" v-for="(item, index) in data" :key="item.Id">
          <van-contact-card
            @click="onEdit(data[index].Id)"
            type="edit"
            :name="data[index].Name"
            :tel="data[index].Tel_Code"
          />
        </div>
      </div>
    </div>
    <Myuser @customerChoice="Client" ref="myuser" />
    <Product @Product="Product" ref="product" />
    <Contacts :row="row" ref="contacts" />
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <!-- <van-button @click="Add" slot="button" type="info">添加</van-button> -->
      <van-button @click="close" slot="button" type="default">关闭</van-button>
      <!-- <van-button @click="handleSubmit" slot="button" type="primary"
        >保存</van-button
      > -->
    </div>
  </van-popup>
</template>

<script>
import Contacts from "./contacts.vue";
import { Icon, ContactCard } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";

import { Row, Col, Cell, CellGroup, Toast, NavBar, Divider, Empty } from "vant";
import { Field } from "vant";
//客户
import Myuser from "@/components/OwnUser.vue";
import Product from "../../components/Product.vue";
export default {
  components: {
    "van-contact-card": ContactCard,
    "van-empty": Empty,
    //分割线
    "van-divider": Divider,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    Myuser,
    Product,
    Contacts
  },
  data() {
    return {
      entity: {},
      data: [],
      show: false,
      Id: "",
      row: {}
    };
  },
  methods: {
    //新建联系人
    onClickRight() {
      this.$refs.contacts.openForm();
    },
    onEdit(id) {
      this.$refs.contacts.openForm(id);
    },
    //返回
    onClickLeft() {
      this.show = false;
    },
    //选中的产品
    Product(a) {
      console.log(a, "选择产品信息");

      this.data.push({
        ProductId: a.cInvCode,
        cInvName: a.cInvName,
        cInvCode: a.cInvCode,
        cInvStd: a.cInvStd
      });
    },
    // 选择产品;
    Add() {
      this.$refs.product.openForm();
    },
    close() {
      this.show = false;
    },
    Client(a) {
      console.log(a);
      this.$set(this.entity, "CustomerName", a.cCusName);
      // this.entity.CustomerName = a.cCusName;
      this.entity.CustomerId = a.cCusCode;
    },
    //选择客户
    CustomerChoice() {
      this.$refs.myuser.openForm();
    },
    getDataList() {
      this.http
        .post(
          "/CustomerManagement/Cust_CustomerLinkMan/GetDataListByConditions",
          {
            SortField: "Id",
            SortType: "desc",
            Search: [
              {
                Condition: "CustomerId",
                Keyword: this.Id
              }
            ]
          }
        )
        .then(res => {
          if (res.Success) {
            this.data = res.Data;
            console.log(this.data);
          } else {
            Toast(res.Mas);
          }
        });
    },
    init() {
      this.show = true;
      (this.data = []), (this.entity = {});
    },

    openForm(row) {
      this.init();
      this.row = row;
      // console.log(row);
      if (row) {
        this.Id = row.Id;
        this.getDataList();
      }
    }
  }
};
</script>

<style>
.scrollBar {
  height: 550px;
  overflow: auto;
}
.close {
  position: "absolute";

  right: 0;
  bottom: 0;
  padding: "5px 16px";
  background: "#fff";
  text-align: right;
  z-index: 1;
}
.client {
  box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
}
.Editbox {
  width: 80%;
  height: 80px;
  overflow: auto;
  margin: 0 auto;

  border: 1px solid #ccc;

  margin-top: 20px;
  margin-bottom: 10px;
}
/* .Father {
  display: flex;
} */
</style>
